<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .list {
            overflow: hidden;
        }

        .list li {
            line-height: 32px;
            /* text-indent: 1em; */
            border: 1px dashed #333;
        }

        button {
            width: 80px;
            height: 45px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h2>模拟封装jquery</h2>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
        </div>
        <div class="buttons">
            <button class="html">html</button>
            <button class="hide">hide</button>
            <button class="show">show</button>
            <button class="width">width</button>
            <button class="height">height</button>
            <button class="css">css</button>
            <button class="attr">attr</button>
            <button class="prop">prop</button>
            <button class="eq">eq</button>
            <button class="siblings">siblings</button>
            <button class="chain">chain</button>
        </div>
    </div>
</body>
<script>
    // 封装一个方法 可以帮助我们快速的操作一个或多个元素  

    // html   text   val
    // hide        show
    // width       height
    // css    
    // 元素节点的属性
    // 绑定事件
    // 遍历元素



    class GetEle {
        constructor(selector) {
            this.eles = document.querySelectorAll(selector);
        }
        html(con) {
            if (arguments.length >= 1) { //有参数
                this.each(function (ele, index) {
                    ele.innerHTML = con;
                })
                return this;
            } else {
                return this.eles[0].innerHTML;
            }
        }
        text(con) {
            if (arguments.length >= 1) { //有参数
                this.each(function (ele, index) {
                    ele.innerText = con;
                })
                return this;
            } else {
                return this.eles[0].innerText;
            }
        }
        val(con) {
            if (arguments.length >= 1) { //有参数
                this.each(function (ele, index) {
                    ele.value = con;
                })
                return this;
            } else {
                return this.eles[0].value;
            }
        }
        hid() {
            this.each(function (ele, index) {
                ele.style.display = "none";
            })
            return this;
        }
        show() {
            this.each(function (ele, index) {
                ele.style.display = "block";
            })
            return this;
        }
        width(con) {
            if (arguments.length >= 1) { // 有参数就设置

                this.each(function (ele, index) {
                    var unitReg = /^\d+(px|pt|%|vw|vh|em|rem)$/;
                    if (unitReg.test(con)) { // 有单位 =>直接赋值
                        ele.style.width = con;
                    } else {
                        ele.style.width = con + "px";
                    }
                })
                return this;
            } else {
                return parseFloat(this.getStyle("width"));
            }
        }
        height(con) {
            if (arguments.length >= 1) { // 有参数就设置

                this.each(function (ele, index) {
                    var unitReg = /^\d+(px|pt|%|vw|vh|em|rem)$/;
                    if (unitReg.test(con)) { // 有单位 =>直接赋值
                        ele.style.height = con;
                    } else {
                        ele.style.height = con + "px";
                    }
                })
                return this;
            } else {

                // return parseFloat(getStyle(this.eles[0], "height"));
                return parseFloat(this.getStyle("height"));
            }
        }
        css(attr, val) {
            if (arguments.length >= 2) { //设置
                this.each(function (ele, index) {
                    ele.style[attr] = val;
                })
                return this;
            } else { // 获取
                if (typeof attr == "object") {
                    // {background: "red",lineHeight: "100px",color: "#6ff"}

                    for (var key in attr) { //  key: background,lineHeight,color
                        var val = attr[key]; // val: "red"
                        this.css(key, val);
                    }
                    return this;
                } else {
                    return this.getStyle(attr);
                }
            }
        }
        getStyle(attr) {
            var ele = this.eles[0];
            try {
                return window.getComputedStyle(ele)[attr];
            } catch (err) {
                return ele.currentStyle[attr];
            }
        }
        click(fn) {
            this.each(function (ele, index) {
                ele.addEventListener("click", fn);
            })
            return this;
        }
        mousemove(fn) {
            this.each(function (ele, index) {
                ele.addEventListener("mousemove", fn);
            })
            return this;
        }
        each(fn) {
            for (let i = 0; i < this.eles.length; i++) {
                let ele = this.eles[i]; // 循环的当前元素 
                let index = i; // 循环的当前下标
                fn(ele, index);
            }
            return this;
        }
        attr(key, val) {
            if (arguments.length >= 2) {
                this.each(function (ele) {
                    ele.setAttribute(key, val);
                })
                return this;
            } else {
                return this.eles[0].getAttribute(key);
            }
        }
        prop(key, val) {
            if (arguments.length >= 2) {
                this.each(function (ele) {
                    ele[key] = val;
                })
                return this;
            } else {
                return this.eles[0][key];
            }
        }
        eq(index) {
            this.eles = [this.eles[index]];
            return this;
        }
        siblings(index) {
            let ele = this.eles[0]; // 找到 eq中被选中的元素
            let parent = ele.parentElement; // 找到父元素
            let children = parent.children; // 找到父元素中所有的子元素  包含ele

            var list = [];
            for (let i = 0; i < children.length; i++) {
                let item = children[i];
                if (item != ele) {
                    list.push(item);
                }
            }
            // console.log(list);
            this.eles = list; //把所有的同级元素放到集合中 赋值给this.eles

            return this; // this -> 调用此方法的实例化对象  (才能进行链式操作)
        }
    }

    function getStyle(ele, attr) { 
        try {
            return window.getComputedStyle(ele)[attr];
        } catch (err) {
            return ele.currentStyle[attr];
        }
    }



    // 对GetEle进行二次封装   =>接收一个选择器 => 返回一个实例化对象
    function $(selector) {
        return new GetEle(selector);
    }



    $(".html").click(function () {
        $(".list li").html("hello world");
    });

    $(".hide").click(function () {
        $(".list li").hid("hello world");
    });

    $(".show").click(function () {
        $(".list li").show("hello world");
    });

    $(".width").click(function () {
        $(".list li").width(500);
    })

    $(".height").click(function () {
        $(".list li").height(100);
    })

    $(".css").click(function () {
        $(".list li").css({
            background: "red",
            lineHeight: "200px",
            textAlign: "center",
            color: "#6ff",
            width: "200px",
            height: "200px",
            float: "left",
        });
    })

    $(".attr").click(function () {
        $(".list li").attr("asd", "hello");
        $(".list li").attr("class", "li");

        alert($(".list li").attr("class"));
    })

    $(".prop").click(function () {
        $(".list li").prop("className", "hello");
        $(".list li").prop("title", "你好");

        alert($(".list li").prop("title"));
    })


    $(".eq").click(function () {
        // console.log($(".list li").eq(0));
        $(".list li").eq(0).css({
            "background": "red"
        })
    })


    $(".siblings").click(function () {
        // console.log($(".list li").eq(0).siblings());
        $(".list li").eq(2).css({
            "background": "red"
        }).siblings().css({
            "background": "blue"
        });
        // $(".list li").eq(0).css({ "background": "red" })
    })


    $(".chain").click(function () {
        $(".list li").html("hello").width(100).height(100).css({
            "background": "red",
            "float": "left"
        })
    })


    $(".list li").each(function (item, index) {
        console.log(item, index);
    })

</script>

</html>